<template>
  <!--  用于编辑数据的，需要传入对象数据-->


  <div class="aceEditor-container">
    <!--    更改字体大小-->
    <el-input-number class="fontSizeSetting" size="small"
                     :min="10" :max="100" v-model="fontSize"></el-input-number>
    <!--    JSON压缩-->
    <!--    <el-button v-show="props.lang==='json'" @click="compress">压缩</el-button>-->
    <!--    JSON格式化-->
    <!--    <el-button v-show="props.lang==='json'" @click="">格式化</el-button>-->
    <v-ace-editor v-model:value="props.value.string"
                  @init="aceEditorInit"
                  ref="VAceEditorRef"
                  :readonly="props.readonly"
                  :options="options"
                  :lang="props.lang"
                  :theme="isDark?aceThemeDark:aceThemeLight"
                  style="height: 100%;width: 100%"/>

  </div>
</template>


<script setup>
import {nextTick, onMounted, ref, watch} from "vue";
import {VAceEditor} from "vue3-ace-editor/index.js";
import './config.js'
import {storeToRefs} from "pinia";
import {useGlobalStore} from "@/stores/modules/global.js";

const globalStore = useGlobalStore();
const {
  isDark,
  aceThemeLight,
  aceThemeDark
} = storeToRefs(globalStore);

const props = defineProps({
  value: {
    type: Object,
    required: true,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  lang: {
    type: String,
    default: 'json',
  },
})

// const emits = defineEmits(["update:value"])

const VAceEditorRef = ref()
const fontSize = ref(16)


const options = ref({
  useWorker: false, // 语法校验，关掉吧，不然JSON前面有红点看着难受
  enableBasicAutocompletion: true,   //启用基本自动完成功能
  enableLiveAutocompletion: true,   //启用实时自动完成功能 （比如：智能代码提示）
  enableSnippets: true,  //启用代码段
  showLineNumbers: true,
  tabSize: 4,
  printMargin: false,
  fontSize: fontSize.value,
})

watch(fontSize, (val) => {
  VAceEditorRef.value.getAceInstance().setFontSize(val)
})

const watchKey = ref([])

onMounted(()=>{

  nextTick(() => {
    let editor = VAceEditorRef.value.getAceInstance();

    editor.session.on('change', function (delta) {
      // delta.start, delta.end, delta.lines, delta.action
      if (delta.action === 'remove'){
        watchKey.value = []
      }

      if (delta.action === 'insert') {
        watchKey.value.push(delta.lines[0])
        if (watchKey.value.length > 2) {
          watchKey.value.shift()
        }
        if (watchKey.value.length === 2) {
          // 插入{{}}
          if (watchKey.value[0] === watchKey.value[1] && watchKey.value[0] === '{') {
            editor.session.insert(delta.end, "}}");
          }
          // 插入{##}
          if (watchKey.value[0] === '{' && watchKey.value[1] === '#') {
            editor.session.insert(delta.end, "#}");
          }
          // 插入{%%}
          if (watchKey.value[0] === '{' && watchKey.value[1] === '%') {
            editor.session.insert(delta.end, "%}");
          }
        }
      }
    });

//   添加快捷键
    editor.commands.addCommand({
      name: 'goToNewLine',
      bindKey: {win: 'shift-enter',  mac: 'shift-enter'},
      exec: function(editor) {
        editor.execCommand("addLineAfter")
      }
    });

  })

})



// 初始化配置
const aceEditorInit = (editor) => {
  //快捷键
  editor.commands.addCommand({
    name: 'selectall',
    bindKey: {win: 'Ctrl-Shift-F', mac: 'Command-Shift-F'},
    exec: (editor) => {
      console.log("!212")
    }
  })
}


</script>

<style scoped>

@import "index.scss";

</style>

